<template>
  <div class="app-container">
    <el-form ref="form" :model="formData" label-width="90px" style="width: 400px;">
      <div v-show="showDirItems">
      <el-form-item label="指定年份">
        <el-select v-model="formData.year" style="width:100%;" placeholder="请选择活动区域">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属主题">
        <el-select style="width: 100%;" v-model="formData.theme_id">
          <el-option label="--- 请选择文档主题 ---" value='0'></el-option>
          <el-option v-for="option in options"
            :key="option.value"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      </div>
      <el-form-item label="方案来源">
        <el-select style="width: 100%;" v-model="formData.from_type">
          <el-option v-for="option in fromOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传用户" v-if="formData.from_type == 2">
        <el-input v-model="formData.from_uid" placeholder="默认为系统上传, 可不填, 如果是帮用户上传, 则需要添加用户的uid"></el-input>
        <!-- <el-select v-model="formData.from_uid" style="width:100%;" placeholder="请选择活动区域">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="上传报告">
        <oss-uploader ref="ossupload" v-on:file2pd="file2pd"></oss-uploader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="submiting" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOptions } from '@/api/theme'
import { add } from '@/api/report'
import OssUploader from './ossUploader'
export default {
  name: 'DocAdd',
  data() {
    return {
      uploader: undefined,
      submiting: false,
      formData: {
        name: '',
        url: '',
        code: '',
        theme_id: '0',
        year: 2017,
        onlineFiles: '',
        from_type: '1',
        from_uid: 0
      },
      autoUpload: false,
      years: [],
      selectOptons: [1],
      // 级联菜单的选项
      options: [],
      fromOptions: [
        {label: "系统", value: '1'},
        {label: "用户", value: '2'}
      ],
      fileList: []
    }
  },
  computed: {
    showDirItems() {
      if (this.pid == 0) {
        return true
      } else {
        return false
      }
    },
     ...mapGetters([
      'admid',
    ])
  },
  components: {
    'oss-uploader': OssUploader
  },
  props: ['pid'],
  created() {
    this.makeYearOptions()
  },
  mounted() {
    this.loadThemeOption()
  },
  methods: {
    // 保存文件到数据中
    file2pd(files) {
      this.fileList = files
    },
    // 获取主题选项
    loadThemeOption() {
      // 请求API获取
      getOptions().then(res => {
        this.options = res.items
      })
    },
    // 发布
    onSubmit() {
      this.submiting = true
      // let themeId = this.options[this.options.length - 1]
      let data = {
        files: JSON.stringify(this.fileList),
        theme_id: this.formData.theme_id,
        name: this.formData.name,
        url: this.formData.url,
        code: this.formData.code,
        year: this.formData.year,
        from_type: this.formData.from_type,
        from_uid: this.formData.from_uid,
        pid: this.pid
      }
      // 检查是否选择了主题
      if (data.theme_id == 0) {
        this.submiting = false
        this.$message.error('请选择文档的主题')
        return
      }

      // 检查文档来源是否是系统
      if (data.from_type == 1) {
        data.from_uid = this.admid
      }

      add(data).then(res => {
        this.$message.success("创建成功!!!")
        this.submiting = false
        this.fileList = [];
        this.$refs.ossupload.reset = this.$refs.ossupload.reset + 1
        this.$emit('close');
      }).catch (err => {
        this.$message.error("请求失败, 请稍后重试" + res.data)
        this.submiting = false
      })
    },
    // 名称匹配
    nameMatch() {
      console.log('name matched')
    },
    // 主题选择
    themeChange() {
      console.log('themeoptions changed')
      console.log(this.selectOptons)
    },
    // 设定年options
    makeYearOptions() {
      let year = new Date().getFullYear()
      for (let y = 2016; y <= year; y++)
      {
        this.years.push({label: y, value: y})
      }
      this.formData.year = year
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .avatar-img {
    width: 40px;
    height: 40px;
    border: 2px solid #409EFF;
    border-radius: 5px;
  }
  .el-button--text {
    padding-top: 0px;
    color: #7C796E;
  }
  .op-form {
    background: #F5F9FF;
    border: 1px dashed #CCCCCC;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 12px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
</style>

